<template>
  <div class="base-info-box">
    <!-- 基础信息 -->
    <div class="basicInfo">
      <common-title :title="'基础信息'"></common-title>
      <div class="info">
        <div class="row">
          <div>
            <span class="rtitle">名称</span><br />
            <span class="name">杨家门</span>
          </div>
          <div class="address">
            <span class="rtitle">地点</span><br />
            <span class="name">运城市-盐湖区-三路里镇</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="rtitle">工程类别</span><br />
            <span class="name">淤地坝</span>
          </div>
          <div>
            <span class="rtitle">工程规模</span><br />
            <span class="name">大型坝</span>
          </div>
          <div>
            <span class="rtitle">工程类型</span><br />
            <span class="name">土坝</span>
          </div>
        </div>
        <div class="row">
          <div class="one">
            <span class="rtitle">枢纽组成</span><br />
            <span class="name">坝体,卧管</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="rtitle">控制面积</span><br />
            <span class="name">5.93km²</span>
          </div>
          <div>
            <span class="rtitle">设计标准</span><br />
            <span class="name">20年</span>
          </div>
          <div>
            <span class="rtitle">校核标准</span><br />
            <span class="name">200年</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="rtitle">坝高</span><br />
            <span class="name">21m</span>
          </div>
          <div>
            <span class="rtitle">坝顶长度</span><br />
            <span class="name">156m</span>
          </div>
          <div>
            <span class="rtitle">坝顶宽度</span><br />
            <span class="name">{{ "--" }}m</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 库容曲线 -->
    <div class="curve">
      <common-title :title="'库容曲线'"></common-title>
      <div id="curveChart"></div>
      <!-- <span
              v-show="curvexAxis.length == 0"
              style="color: rgba(255, 255, 255, 0.6); font-size: 14px"
              >库容曲线参数未配置</span
            > -->
    </div>
    <!-- 影像图 -->
    <div class="video">
      <common-title :title="'影像图'"></common-title>
      <div class="videoSwipe">
        <el-carousel :interval="4000" type="card" height="107px">
          <el-carousel-item v-for="(img, index) in imageList" :key="index">
            <img :src="img" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import commonTitle from "../../components/common-title/index.vue";
import * as echarts from "echarts";
import { useImageUrl } from "../../hooks/useImgUrl";
const imageList = [
  useImageUrl("yxt", "yxt1", "jpg"),
  useImageUrl("yxt", "yxt2", "jpg"),
  useImageUrl("yxt", "yxt3", "jpg"),
];
let chartData = [
  [0, 701.6],
  [1.8, 706.6],
  [5.28, 711.6],
  [9.2, 716.6],
  [14.4, 721.6],
  [21.18, 726.6],
  [28.45, 731.6],
  [36.48, 736.6],
];

onMounted(() => {
  renderCurveChart(chartData, {
    lnkr: 5.28,
    lngc: 711.6,
    yykr: 9.2,
    yyjgc: 716.6,
    zkr: 36.48,
    zgc: 736.6,
    zhkr: 21.18,
    zhgc: 726.6,
  });
});
let myChart3: any = null;
function renderCurveChart(chartData: Array<Array<number>>, data: any) {
  const specialArr = [
    // 拦泥库容， 拦泥高程
    [data.lnkr, data.lngc],
    //
    [data.yykr, data.yyjgc],
    [data.zkr, data.zgc],
    [data.zhkr, data.zhgc],
  ];
  let yAxisArr: any = [];
  chartData.forEach((arr) => {
    yAxisArr.push(arr[1]);
  });
  if (myChart3) {
    myChart3.dispose();
  }
  myChart3 = echarts.init(document.getElementById("curveChart"));
  const option = {
    grid: {
      top: "15%",
      left: "10%",
      right: "15%",
      bottom: "10%",
      // containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      borderWidth: 0,
      axisPointer: {
        type: "cross",
      },
      formatter: (params: any) => {
        // console.log("params-----", params);
        let str;
        switch (params[0].data[0]) {
          case data.lnkr:
            str = "拦泥库容";
            break;
          case data.zkr:
            str = "总库容";
            break;
          case data.yykr:
            str = "淤积库容";
            break;
          case data.zhkr:
            str = "滞洪库容";
            break;
          default:
            str = "";
            break;
        }
        return (
          str +
          `<div >库容：${
            params[0].data[0]
          } 万m³</div><div > 高程：${params[0].data[1].toFixed(2)}m</div>`
        );
      },
    },
    xAxis: {
      type: "value",
      name: "V(万m³)",
      min: 0,
      splitNumber: 6,
      interval: 50,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "H(m)",
        min: Math.min(...yAxisArr),
        splitNumber: 10,
        interval: 5,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        z: 10,
        data: specialArr,
        type: "scatter",
        symbol: "triangle",
        symbolSize: 10,
        lineStyle: {
          color: "#5470C6",
          width: 2,
          type: "dashed",
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "#EE6666",
          color: "yellow",
        },
      },
      {
        type: "line",
        smooth: true,
        data: chartData,
      },
    ],
  };
  myChart3.setOption(option);
}

function showCaptureImg(item: any) {}
</script>

<style lang="less" scoped>
.base-info-box {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  box-sizing: border-box;
  .basicInfo {
    .row {
      display: flex;
      margin-bottom: 10px;
      div {
        width: 38%;
        line-height: 22px;
        &.one {
          width: 100%;
        }
        &:nth-child(2).address {
          width: 62%;
        }
        &:nth-child(2) {
          width: 38%;
        }
        &:nth-child(3) {
          width: 24%;
        }
        .rtitle {
          font-size: 16px;
          font-weight: 4;
        }
        .name {
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }
  .curve {
    position: relative;
    #curveChart {
      width: 22vw;
      height: 220px;
    }
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .video {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .videoSwipe {
     flex: 1;
     overflow: hidden;
      img {
        height: 100%;
      }
    }
  }
}
</style>
